<template>
    <div class="select-scene">
        <el-dialog v-dialog-drag width="650px" :visible.sync="show" :title="title" :close-on-click-modal="false"
            :append-to-body="true" :before-close="closeDialog">
            <div class="search-box">
                <div class="search-form">
                    <el-input placeholder="请输入名称" v-model="ruleForm.appNameLike">
                        <template slot="append">
                            <el-button @click="clickQuery">搜索</el-button>
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="table-box">
                <el-table :height="300" v-loading="loading" :data="tableData.columnData">
                    <el-table-column label="logo" prop="appLogo" width="120" align='left'>
                        <template slot-scope="scope">
                            <imgShow :url="scope.row.appLogo"></imgShow>
                        </template>
                    </el-table-column>
                    <el-table-column label="类型" prop="appTypeName" width="120" align='left'>
                    </el-table-column>
                    <el-table-column label="名称" prop="appName">
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="100">
                        <template slot-scope="scope">
                            <template v-if="multiple">
                                <el-button type="text" @click="cancleSelectThis(scope.row)" v-if="selection.findIndex(item => item.id == scope.row.id) > -1">已选择</el-button>
                                <el-button type="text" @click="selectThis(scope.row)" v-else>选择</el-button>
                            </template>
                            <el-button type="text" v-else @click="selectThis(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <section class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="[5,10,15,30,50]" :page-size="tableData.pageSize" layout="sizes,total,prev,pager,next"
                    :current-change.sync="tableData.currentPage" :current-page.sync="tableData.currentPage"
                    :total="tableData.total">
                </el-pagination>
            </section>
            <div slot="footer" v-if="multiple">
                <el-button type="primary" @click="selectAll" :disabled="selection.length == 0">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import imgShow from '@/components/avator/imgShow';
    import { wxServerConfig } from './service.js';
    export default {
        name: 'selectConfig', // 选择渠道组件
        props: {
            multiple: {
                type: Boolean,
                default: false,
            },
            serverType: String,
            platType: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        components: { imgShow },
        data() {
            return {
                show: false,
                title: '选择渠道',
                ruleForm: {
                    appNameLike: '',
                },
                tableData: {
                    currentPage: 1,
                    pageSize: 15,
                    total: 0,
                    columnData: [],
                },
                selection: [],
                loading: false,
            }
        },
        methods: {
            showDialog() {
                this.show = true;
                this.ruleForm.appNameLike = '';
                this.clickQuery();
            },
            closeDialog() {
                this.selection = [];
                this.show = false;
            },
            clickQuery() {
                this.tableData.currentPage = 1;
                this.queryListFun();
            },
            queryListFun() { // 查询分类下的场景
                let params = {
                    rowSize: this.tableData.pageSize,
                    startRow: this.tableData.currentPage,
                    appNameLike: this.ruleForm.appNameLike,
                    serverType: this.serverType,
                    platType: this.platType.join()
                }
                this.loading = true;
                wxServerConfig(params).then(res => {
                    this.tableData.columnData.splice(0, this.tableData.columnData.length);
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (Array.isArray(data.data)) {
                            this.tableData.columnData.push(...data.data);
                            this.tableData.total = data.total;
                        } else {
                            this.tableData.total = 0;
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                })
            },
            handleCurrentChange(val) {
                this.tableData.currentPage = val;
                this.queryListFun();
            },
            handleSizeChange(val) {
                this.tableData.currentPage = 1;
                this.tableData.pageSize = val;
                this.queryListFun();
            },
            selectThis(row) {
                if(!this.multiple) {
                    this.$emit('update', row);
                    this.closeDialog();
                }else {
                    this.selection.push(row);
                }
            },
            cancleSelectThis(row) {
                let index = this.selection.findIndex(item => item.id == row.id);
                if(index > -1) {
                    this.selection.splice(index, 1);
                }
            },
            selectAll() {
                this.$emit('update', this.selection);
                this.closeDialog();
            },
        }
    }

</script>

<style lang="scss" scoped>
.select-scene {
    // display: inline-block;
    vertical-align: middle;
    // float: left;
}
</style>
